<template>
  <div class="box-pro">
    <div class="teacher">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="name" label="老师" width="150"></el-table-column>
        <el-table-column prop="tips" label="标签" width="300">
          <template slot-scope="scope">
            <el-tag
              v-for="item in scope.row.tips"
              :key="item.label"
              :type="item.type"
              effect="dark"
              style="margin-left:4px"
            >{{item.label }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="about" label="内容"></el-table-column>
        <el-table-column prop="url" label="B站地址" width="180">
          <template slot-scope="scope">
            <el-button size="medium" round type="primary">
              <a :href="scope.row.url">主页</a>
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          url:
            "https://space.bilibili.com/341919508?spm_id_from=333.788.b_765f7570696e666f",
          name: "Johnny老师",
          tips: [
            { type: "", label: "Vue.Js" },
            { type: "success", label: "Node.Js" }
          ],
          about:
            "全栈项目,Express+MongoDB+Vue,Nuxt+Nest+Vue,有完整的项目从开始到部署"
        },
        {
          url:
            "https://space.bilibili.com/425325651?spm_id_from=333.788.b_765f7570696e666f",
          name: "Simba老师",
          tips: [{ type: "", label: "Vue.Js" }],
          about: "小程序,Vue,JS,JQ,面试,UI,基本都是上课的录制视频"
        },
        {
          url:
            "https://space.bilibili.com/40018594?spm_id_from=333.788.b_765f7570696e666f",
          name: "老陈老师",
          tips: [
            { type: "", label: "Vue.Js" },
            { type: "info", label: "React.Js" },
            { type: "success", label: "Node.Js" }
          ],
          about: "很多前端的技巧,你想要的他都有"
        },
        {
          url:
            "https://space.bilibili.com/391385119?from=search&seid=48781827257193027",
          name: "大地老师",
          tips: [{ type: "success", label: "Node.Js" }],
          about: "涵盖了大部分前后端技术视频,对他的MongDB课程印象深刻"
        },
        {
          url:
            "https://space.bilibili.com/431551452?spm_id_from=333.788.b_765f7570696e666f",
          name: "手把手撸码前端",
          tips: [
            { type: "", label: "Vue.Js" },
            { type: "info", label: "React.Js" }
          ],
          about: "非常细致的前端老师,Vue,React完整项目,包括UI,Git,webpack,nginx"
        },
        {
          url:
            "https://space.bilibili.com/165659472?from=search&seid=12874981382685730153",
          name: "JS胖老师",
          tips: [
            { type: "", label: "Vue.Js" },
            { type: "info", label: "React.Js" },
            { type: "success", label: "Node.Js" }
          ],
          about: "涵盖了大部分课程,入门视频"
        },
        {
          url:
            "https://space.bilibili.com/449316607?spm_id_from=333.788.b_765f7570696e666f",
          name: "forbigger",
          tips: [{ type: "warning", label: "Linux" }],
          about: "全面的讲解了Centos的部署"
        }
      ]
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.$nuxt.$loading.start();

      setTimeout(() => this.$nuxt.$loading.finish(), 500);
    });
  }
};
</script>

<style lang="scss" scoped>
html,
body,
#__nuxt,
#__layout,
#__layout {
  margin: 0px;
  padding: 0px;
  height: 100vh;
  width: 100vw;
}

.box-pro {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.teacher {
  width: 80%;
  height: 80%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.el-table {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  background-color: transparent;
}
.el-table::before {
  background-color: transparent;
}
/deep/ tr {
  height: 100%;
  background-color: rgba(255, 255, 255, 0.3);
}
/deep/ th {
  text-align: left !important;
  color: #909399 !important;
  text-indent: 0 !important;
  background-color: rgba(255, 255, 255, 0.3) !important;
}
/deep/ td {
  border: none;
}
/deep/ th.is-leaf {
  border: none;
}
/deep/ .el-table_1_column_1 {
  color: black;
  font-weight: bold;
  background-color: rgba(255, 255, 255, 0.7);
  text-align: center;
}
/deep/ .el-table_1_column_3 {
  background-color: rgba(255, 255, 255, 0.6);
  text-indent: 4px;
}
/deep/ .el-table_1_column_4 {
  text-align: center;
}

a {
  text-decoration: none;
  color: white;
  letter-spacing: 1px;
}
</style>